<<<<<<< HEAD
{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <!-- 分类导航 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5>商品分类</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        {% for category in ProductCategory %}
                        <li class="list-group-item">
                            <a href="{% url 'category_products' category.id %}">{{ category.name }}</a>
                            {% if category.subcategories.exists %}
                            <ul class="list-group mt-2">
                                {% for sub in category.subcategories.all %}
                                <li class="list-group-item">
                                    <a href="{% url 'category_products' sub.id %}">{{ sub.name }}</a>
                                </li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <!-- 商品展示区 -->
        <div class="col-md-9">
            <div class="row">
                {% for product in products %}
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card h-100">
                        <img src="{% static product.image_url %}" class="card-img-top" alt="{{ product.name }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ product.name }}</h5>
                            <p class="card-text text-danger">¥{{ product.price }}</p>
                            <p class="text-muted">库存: {{ product.stock_quantity }}</p>
                        </div>
                        <div class="card-footer bg-transparent">
                            <a href="{% url 'detail' product_id=product.id %}" class="btn btn-sm btn-outline-primary">详情</a>
                            <button class="btn btn-sm btn-primary add-to-cart" 
                                    data-product-id="{{ product.id }}">
                                加入购物车
                            </button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 加入购物车功能
    document.querySelectorAll('.add-to-cart').forEach(btn => {
        btn.addEventListener('click', function() {
            const productId = this.dataset.productId;
            fetch(`/cart/add/?id=${productId}&quantity=1`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if(data.status === 1) {
                    alert('商品已加入购物车');
                } else {
                    alert(data.message || '操作失败');
                }
            });
        });
    });
});
</script>
=======
{% extends 'layout.html' %}

{% block title %}首页{% endblock %}

{% block content %}
    <div id="content">
        <!-- 页面特定样式 -->
        <style>
            /* 您可以在这里添加页面特定的CSS样式 */
        </style>

        <!-- 搜索栏 -->
        <div class="search_bar clearfix">
            <form action="/search/" method="get">
                <input type="text" name="query" placeholder="搜索商品...">
                <button type="submit">搜索</button>
            </form>
        </div>
        <hr>

        <!-- 轮播图 -->
        <div class="center_con clearfix">
        
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    {% for category in categories %}
                    <div class="swiper-slide">
                        <a href="/goods/?cag={{ category.id }}&page=1">
                            <img src="/static/category.id.png" alt="{{ category.name }}">
                        </a>
                    </div>
                    {% endfor %}
                </div>
                <div class="swiper-pagination"></div>
            </div>
           
            <script>
                var swiper = new Swiper('.mySwiper', {
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    autoplay: {
                        delay: 3000,
                    },
                });
            </script>
        </div>

        <!-- 商品分类导航 -->
        <ul class="subnav fl">
            {% for category in categories %}
            <li>
                <a href="/goods/?cag={{ category.id }}&page=1" class="goods_name">
                    <p>{{ category.name }}</p>
                </a>
            </li>
            {% endfor %}
        </ul>

        <!-- 商品列表 -->
        <ul>
            {% for category in categories %}
            <li>
                <h2>{{ category.name }}</h2>
                <!-- 显示子分类（如果有的话） -->
                {% for subcategory in category.subcategories.all %}
                <div>
                    <h3>{{ subcategory.name }}</h3>
                    <ul>
                        {% for product in subcategory.products.all %}
                        <li>
                            <a href="/detail/?id={{ product.id }}">
                                <img src="{{ product.image_url }}" alt="{{ product.name }}">
                            </a>
                            <h4>{{ product.name }}</h4>
                            <p>{{ product.price }}</p>
                            <!-- 其他商品信息 -->
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endfor %}

                <!-- 显示顶级分类下的商品 -->
                <ul>
                    {% for product in category.products.all %}
                    <li>
                        <a href="/detail/?id={{ product.id }}">
                            <img src="{{ product.image_url }}" alt="{{ product.name }}">
                        </a>
                        <h4>{{ product.name }}</h4>
                        <p>{{ product.price }}</p>
                        <!-- 其他商品信息 -->
                    </li>
                    {% endfor %}
                </ul>
            </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}

{% block footjs %}
    <!-- 页面特定的脚本 -->
    <script>
        // 您可以在这里添加页面特定的JavaScript代码
    </script>
>>>>>>> 0ac75087e5e07a3ef0624f7a4a9866c7346941b7
{% endblock %}